<template>
<div>
  <div class="recommend-title">热点推荐</div>
  <ul>
    <router-link tag="li"
    class="item border-bottom"
    v-for="item of recommendList"
    :key="item.id"
    :to="'/detail/' + item.id"
    >
      <div class="item-img-wrapper">
        <img class="item-img" :src="item.imgUrl" alt="">
      </div>
      <div class="item-info">
        <p class="item-title">{{item.title}}</p>
        <p class="item-desc">{{item.desc}}</p>
        <button class="item-button">查看详情</button>
      </div>
    </router-link>
  </ul>
</div>
</template>

<script>
export default{
  name: 'HomeRecommend',
  props: {
    recommendList: Array
  } /*
  data () {
    return {
      recommendList: [
        {
          id: '0001',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1704/a5/a59677101e07d38a3.img.jpg_200x200_6064e939.jpg',
          title: '国色天乡·陆地乐园',
          desc: '10831条评论'
        }, {
          id: '0002',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1901/5f/5f078c5acbeb91e3a3.water.jpg_200x200_bc3cc7ac.jpg',
          title: '国色天乡·陆地乐园',
          desc: '10831条评论'
        }, {
          id: '0003',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1508/53/53c486532f848d71.img.jpg_200x200_c4be246c.jpg',
          title: '国色天乡·陆地乐园',
          desc: '10831条评论'
        }]
    }
  } */
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.recommend-title
  margin-top: .2rem
  line-height: .8rem
  background: #eee
  text-indent: .2rem
.item
  overflow:hidden
  display:flex
  height:1.9rem
  .item-img
    width:1.7rem
    height:1.7rem
    padding:.1rem
  .item-info
    flex:1
    padding:.1rem
    min-width:0
    .item-title
      line-height:.54rem
      font-size:.32rem
      ellipsis()
    .item-desc
      line-height:.4rem
      color:#ccc
      ellipsis()
    .item-button
      line-height:.44rem
      margin-top:.16rem
      background:#ff9300
      padding:0 .2rem
      border-radius:.06rem
</style>
